<template>
  <div class="app-container">
    <div>
      <el-button type="success" size="mini" @click="showAddDialog()">添加</el-button>
    </div>
    <el-table :data="list" border fit style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="角色名"> </el-table-column>
      <el-table-column prop="code" label="角色编码"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            title="修改"
            @click="showUpdateDialog(scope.row.id)"/>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除"
            @click="deleteById(scope.row.id)"/>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-setting"
            title="分配权限"
            @click="showAssignPermissionDialog(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="selectByPage"
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total, prev, pager, next"
    >
    </el-pagination>

    <!-- 添加、修改dialog -->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="role" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="role.name"></el-input>
        </el-form-item>
        <el-form-item label="角色编号">
          <el-input v-model="role.code"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="role.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="分配权限" :visible.sync="dialogPermissionVisible" width="40%">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        ref="tree"
        :props="defaultProps">
      </el-tree>
      <div slot="footer">
          <el-button type="primary" @click="assignPermission()">保存</el-button>
          <el-button @click="dialogRoleVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
//引入role.js接口
import roleApi from "@/api/rbac/role";
import permissionApi from "@/api/rbac/permission";

export default {
  name: "",
  data() {
    return {
      list: null, //表格对应的列表数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数

      dialogVisible: false,//添加、修改dialog
      role: {}, // 添加、修改对应封装role对象

      //树形结构
      dialogPermissionVisible: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }

    };
  },
  created() {
    this.selectByPage(this.page, this.limit);
  },
  methods: {
    selectByPage(page = 1) {
      this.page = page;
      roleApi.selectByPage(this.page, this.limit).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total - 0;
      });
    },
    deleteById(id) {
      this.$confirm("您确认要删除么？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        roleApi.deleteById(id).then((response) => {
          if (response.ok) {
            //提示信息
            this.$message({
              type: "success",
              message: response.msg,
            });
            //回到列表首页
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    showAddDialog() {
      this.dialogVisible = true
      this.role = {}
    },
    showUpdateDialog(id) {
      this.dialogVisible = true
      this.role = {}
      roleApi.selectById(id).then(response => {
        this.role = response.data
      })
    },
    addOrUpdate() {
      if (!this.role.id) {
        roleApi.add(this.role).then(response => {
            if(response.ok) {
              //弹出提示
              this.$message({type: "success", message: response.msg});
              //关闭弹框
              this.dialogVisible = false
              //刷新数据
              this.selectByPage()
            }
        })
      } else {
        roleApi.update(this.role).then(response => {
          if(response.ok) {
            this.$message({type: "success", message: response.msg});
            this.dialogVisible = false
            this.selectByPage()
          }    
        })
      }
    },
    showAssignPermissionDialog(row) {
      this.role = row
      this.dialogPermissionVisible = true
      this.treeData = []
      permissionApi.selectAssignedPermission(row.id).then(response => {
        this.treeData = response.data.permissionVOTreeList
        const checkedLeafIdList = []
        this.getCheckedLeafIds(response.data.permissionVOTreeList, response.data.assignedPermissionIdList, checkedLeafIdList)
        this.$refs.tree.setCheckedKeys(checkedLeafIdList)
      })
    },
    // 递归找出设置的权限中所有的叶子节点
    getCheckedLeafIds(permissionVOTreeList, assignedPermissionIdList,checkedLeafIdList) {
      permissionVOTreeList.forEach(permissionVO => {
        assignedPermissionIdList.forEach(id => {
          // 是我选择的权限，而且没有孩子是叶子节点
          if (permissionVO.id === id && permissionVO.children.length === 0) {
            checkedLeafIdList.push(id)
          } else {
            this.getCheckedLeafIds(permissionVO.children, assignedPermissionIdList, checkedLeafIdList)
          }
        })
      });
    },
    assignPermission() {
      let checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
      console.log(checkedNodes)
      let permissionIds = checkedNodes.map(node => node.id)
      permissionIds = permissionIds.join(',')
      permissionApi.assignPermission(this.role.id, permissionIds).then(response => {
        if(response.ok) {
          this.$message({type: "success", message: response.msg});
          this.dialogVisible = false
          this.selectByPage()
          this.dialogPermissionVisible = false
        }
      })
    }

  },
};
</script>
 
<style scoped>
</style>